<template>
  <view class="my-posts-page">
    <view :class="['fade-in-all', showAll ? 'show' : '']">
      <view class="post-list">
        <view class="post-card" v-for="(item, idx) in posts" :key="idx">
          <view class="post-header">
            <text class="post-title">{{ item.title }}</text>
            <text class="post-time">{{ item.time }}</text>
          </view>
          <view class="post-body">
            <text class="post-desc">{{ item.desc }}</text>
            <image v-if="item.img" :src="item.img" class="post-img" mode="aspectFill"/>
          </view>
          <view class="post-footer">
            <view class="footer-item">
              <image src="/static/icons/heart.png" class="footer-icon" />
              <text>{{ item.likes }}</text>
            </view>
            <view class="footer-item">
              <image src="/static/icons/message1.png" class="footer-icon" />
              <text>{{ item.comments }}</text>
            </view>
            <view class="footer-item">
              <image src="/static/icons/eye.png" class="footer-icon" />
              <text>{{ item.views }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showAll: false,
      posts: [
        {
          title: '陪伴长者的一天',
          time: '2024-06-01 09:30',
          desc: '今天为201房的王奶奶做了健康检查，还陪她一起散步、聊天。她说很喜欢这里的生活，感觉很温暖。',
          img: '/static/images/banner1.jpg',
          likes: 12,
          comments: 3,
          views: 56
        },
        {
          title: '健康讲座小记',
          time: '2024-05-28 15:20',
          desc: '本周组织了“夏季防暑”健康讲座，长者们积极参与，现场气氛热烈。大家都学到了不少实用知识。',
          img: '',
          likes: 8,
          comments: 1,
          views: 34
        },
        {
          title: '手工活动分享',
          time: '2024-05-20 10:10',
          desc: '带领长者们做了手工花艺，大家都很有成就感。成品装点了活动室，气氛特别温馨。',
          img: '/static/images/banner2.jpg',
          likes: 15,
          comments: 4,
          views: 61
        }
      ]
    };
  },
  onReady() {
    setTimeout(() => {
      this.showAll = true;
    }, 50);
  }
};
</script>

<style scoped>
.my-posts-page {
  min-height: 100vh;
  background: #fff;
  padding: 0;
}
.post-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 14px 16px 14px;
}
.post-card {
  background: #f7f8fa;
  border-radius: 12px;
  border: 1.5px solid #e0e0e0;
  box-shadow: 0 4px 16px rgba(91,184,172,0.10);
  padding: 14px 14px 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.post-card:first-child {
  margin-top: 10px;
}
.post-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.post-title {
  font-size: 16px;
  font-weight: bold;
  color: #5bb8ac;
}
.post-time {
  font-size: 12px;
  color: #aaa;
}
.post-body {
  margin: 8px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.post-desc {
  font-size: 15px;
  color: #666;
  line-height: 1.5;
}
.post-img {
  width: 100%;
  max-width: 100%;
  height: 120px;
  border-radius: 8px;
  object-fit: cover;
  margin-top: 4px;
}
.post-footer {
  display: flex;
  gap: 18px;
  margin-top: 8px;
}
.footer-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #5bb8ac;
}
.footer-icon {
  width: 16px;
  height: 16px;
}
.fade-in-all {
  opacity: 0;
  transition: opacity 0.5s;
}
.fade-in-all.show {
  opacity: 1;
}
</style> 